<template>
  <div class="loginPage">
    <div class="welcome">
      <img src="./img/login-logo.png" alt="" />
    </div>
    <div class="right">
      <div class="box">
        <h3>Hi，欢迎登录！</h3>
        <el-form ref="loginDom" :rules="rules" :model="data.userAccount">
          <el-form-item prop="username">
            <el-input v-model="data.userAccount.username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" show-password v-model="data.userAccount.password" />
          </el-form-item>
          <el-form-item class="btnForm">
            <el-button class="btn" type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
        <div class="qm">
          <img src="./img/ViewImage.png" alt="" />
          <p>技术支持单位：中咨数据有限公司</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userLogin } from './api/login'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

const loginDom = ref()
let data = reactive({
  userAccount: {
    username: '',
    password: '',
  },
})
const rules = {
  username: [
    {
      required: true,
      message: '该字段必填',
    },
    {
      pattern: /[a-zA-Z]\w{1,7}/,
      message: '用户名由2-8位英文字母数字下划线组成首字符必须英文',
    },
  ],
  password: [
    {
      required: true,
      message: '该字段必填',
    },
  ],
}

if (localStorage.getItem('account')) {
  data.userAccount = JSON.parse(localStorage.getItem('account') as string)
}
console.log(data.userAccount)
const storageInfo = (res: any) => {
  ElMessage({
    message: '登录成功！',
    type: 'success',
  })
  // localStorage.setItem("userInfo", JSON.stringify(res.data.data.userInfo));
  localStorage.setItem('token', res.data.data)
}
const onSubmit = () => {
  console.log(data.userAccount)
  loginDom.value.validate((valid: any) => {
    if (valid) {
      userLogin(data.userAccount).then((res) => {
        if (res.data.code === 200) {
          router.replace('/')
          if (!localStorage.getItem('account')) {
            localStorage.setItem('account', JSON.stringify(data.userAccount))
          }
          storageInfo(res)
        } else {
          ElMessage({
            message: '登录失败！',
            type: 'error',
          })
        }
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>

<style scoped lang="scss">
.loginPage {
  display: flex;
  height: 100vh;
  .welcome {
    width: 72%;
    color: aliceblue;
    box-sizing: border-box;
    padding: 150px 50px;
    background-image: url(./img/bg_login.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    img{
      width: 350px;
    }
  }
  .right {
    flex: 1;
    display: flex;
    // align-items: center;
    // justify-content: center;
    .box {
      position: relative;
      width: 300px;
      // background-color: #704040;
      margin: 0 auto;
      padding: 45% 20px;
      border-radius: 20px;
      .el-form-item {
        .btn {
          width: 100%;
          margin-top: 10px;
        }
        :deep(.el-form-item__label) {
          width: 100px;
          color: rgb(22, 27, 27);
        }
      }
    }
  }
  .qm {
    position: absolute;
    z-index: 2;
    bottom: 20px;
    right: 0;
    font-size: 10px;
    text-align: right;
    img {
      width: 80px;
    }
  }
}
</style>
